page {
    height: 100vh;
    background-color:#F5F5F5;
}
.content {

    .btn {
        margin-top: 20rpx;
        padding: 20rpx;
        display: flex;
        flex-wrap: nowrap;
      .btn-item {
         border:1rpx solid #ccc;
          width: 33.33%;
          background-color: #FBF2F2;
          margin-right: 20rpx;
          font-size: 40rpx;
          display: flex;
          justify-content: center;
          align-items: center;
          height: 80rpx;
          border-radius: 20rpx;
      }
      //选中的样式
      .active {
        background-color: red;
        color:#fff;
      }
    }
  
    .card {
      
        margin-top: 20rpx;
        padding: 20rpx;
        display: flex;
      .card-dot {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
        //   外部小圆点
          .out-dot{
            width: 30rpx;
            height: 30rpx;
            border-radius: 15rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            
        .small-dot {
            display: flex;
            justify-content: center;
            align-items: center;
            .dot-inside {
                width: 20rpx;
                height: 20rpx;
                border-radius: 15rpx;
                display: flex;
                justify-content: center;
                align-items: center;        
            }
            .active {
               background-color: #F0302F;
              }
              .noactive {
                 background-color: #05B8A0;
              }
  
        }

          }
          .active {
            border:1rpx solid #D90A0A;   
          }
          .noactive {
              border:1rpx solid #05B8A0;
          }


      }
  
      .card-content {
        border-radius: 10rpx;
          flex: 6;
          .data{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .content-date {
              height: 80rpx;
              display: flex;
              align-items: center;
              padding-left: 10rpx;
              // font-size: 30rpx;
              color:#fff;
              // border:1rpx solid #fff;
              // box-shadow: 5rpx 5rpx 5rpx #fff;

          }
          .name {
            // font-size:30rpx;
            color: #fff;
            // font-weight: 3;
            padding-right: 20rpx;
          }
          }
  
        .content {
            margin-top: 30rpx;
            padding: 30rpx;
            display: flex;
            align-items: center;
            color:#fff;
            border-top: 2rpx solid #fff;
            font-size: 30rpx;
        }
      }
      //颜色的变化
      .active1 {
        background: #D90A0A;
      }
      .noactive1 {
          background: #05B8A0;
      }
    }
  
    .save-progress { 
        padding: 20rpx;
        margin-top: 30rpx;
      .save-title {
          font-size: 35rpx;
          font-weight: 800;
          margin-bottom: 40rpx;
  
      }
  
      .input {
          display: flex;
          flex-wrap: nowrap;
        .text {
            padding-left: 20rpx;
            border: 2rpx solid #ccc;
            border-radius: 20rpx;
            height: 200rpx;
        }
  
         .btn{
            width: 20%;
            display: flex;
            justify-content: center;
            align-items: center;
            color: red;
        }
      }

      .radios {
          display: flex;
          flex-wrap: nowrap;
          .radio-group {
              display: flex;
              margin-top: 20rpx;
              .radio{
                  margin-right: 10rpx;
              }
              .text {
                  margin-right: 10rpx;
              }
  
        }
  
        button {
            margin-top:15rpx;
            width: 170rpx;
            height: 50rpx;
            font-size: 32rpx;
            font-weight: 200;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #05B8A0;
            color:#fff;
  
        }
      }
    }
  
    .detail-card {
        background-color: #fff;
        padding: 20rpx;
        border-radius: 20rpx;
      .detail-order {


  
      }
  
      .date {
  
      }
  
      .data-limit {
  
      }
  
      .work {
  
      }
    }
  

    // 图片区域
    .pic-title {
      padding: 20rpx;
    }
    .pic {
      image {
        padding: 20rpx;
        border-radius: 20rpx;
  
      }
      .btn-box {
        display: flex;
        justify-content: center;

        .btn {
          display: flex;
          justify-content: center;
          align-items: center;
          color: #fff;
          background-color: rgba( 235,68,80);
          height: 80rpx;
          border-radius: 20rpx;
          width: 60%;
          margin-bottom: 20rpx;
        }
      }

    }
  }


  //微信圆点样式的改变

radio{
    border-radius: 50%;
    width: 40rpx;/* 最好是4的倍数，不然会不在中间 */
    height: 40rpx;
    border: 2rpx solid #666;/* 设置边框（外圆） */
    font-size: 0;/* 让边框重合 */
  }
  radio .wx-radio-input{
     border-radius: 50%;
     width: 40rpx;
     height: 40rpx; 
     border: none;/* 替换边框（隐藏原有边框） */
  }
  radio .wx-radio-input.wx-radio-input-checked::before{
    border-radius: 50%;
    width: 20rpx; 
    height: 20rpx; 
    text-align: center;
    border:rpx solid #D90A0A !important;
    font-size:0rpx; /* 对勾大小 去掉 */
    background-color: #D90A0A; 
    transform:translate(-50%, -50%) scale(1);
    -webkit-transform:translate(-50%, -50%) scale(1);
 }
radio .wx-radio-input.wx-radio-input-checked{
    border-color:#F0302F !important;
    border:10rpx;
}


